<template>
  <div class="container">
    <PageHeader title="企业门户网站管理系统" content="个人中心" />
    <div class="content">
      <el-row :gutter="20" class="el-row">
        <el-col :span="8" :offset="0">
          <el-card class="card-box">
            <el-avatar :size="100" :src="avatarUrl" />
            <h3>{{ loginStore.userInfo.username }}</h3>
            <h3>{{ loginStore.userInfo.role === 1 ? '管理员' : '普通用户' }}</h3>
          </el-card>
        </el-col>
        <el-col :span="16" :offset="0">
          <el-card>
            <template #header> <span>个人信息</span> </template>
            <el-form
              ref="userFormRef"
              style="max-width: 600px"
              :model="userForm"
              :rules="userFormRules"
              label-width="100px"
              class="userform-box"
              status-icon
            >
              <el-form-item label="用户名" prop="username">
                <el-input v-model="userForm.username" />
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-select v-model="userForm.gender" placeholder="请选择性别">
                  <el-option
                    v-for="item in genderOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="介绍" prop="introduction">
                <el-input v-model="userForm.introduction" type="textarea" />
              </el-form-item>
              <el-form-item label="头像" prop="avatar">
                <UploadFile :avatar="userForm.avatar" @handle-upload="handleUpload" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm(userFormRef)"> 更新 </el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useLoginStore } from '@/stores'
import type { UserInfo } from '@/types/user'
import { computed, ref, reactive } from 'vue'
import UploadFile from '@/components/upload/UploadFile.vue'
import { ElMessage, type FormInstance, type UploadRawFile } from 'element-plus'
import upload from '@/utils/upload'
const genderOptions = [
  {
    label: '保密',
    value: 0,
  },
  {
    label: '男',
    value: 1,
  },
  {
    label: '女',
    value: 2,
  },
]
const loginStore = useLoginStore()
const circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
const avatarUrl = computed(() => {
  return loginStore.userInfo.avatar
    ? `http://localhost:3000${loginStore.userInfo.avatar}`
    : circleUrl.value
})

const { _id, username, gender, introduction, avatar } = loginStore.userInfo
const userFormRef = ref()
const userForm: UserInfo = reactive({
  _id,
  username,
  gender,
  introduction,
  avatar,
  file: undefined,
})

const userFormRules = reactive({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
  introduction: [{ required: true, message: '请输入介绍', trigger: 'blur' }],
  avatar: [{ required: true, message: '请上传头像', trigger: 'blur' }],
})

const handleUpload = (uploadFile: UploadRawFile) => {
  console.log(uploadFile)
  userForm.avatar = URL.createObjectURL(uploadFile)
  userForm.file = uploadFile
}
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  userFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      const res = await upload('/adminapi/user/upload', userForm)
      const { code, msg, data } = res
      if (code === '0') {
        const newUserInfo: UserInfo = {
          ...loginStore.userInfo,
          ...data,
        }
        loginStore.setUserInfo(newUserInfo)
        ElMessage.success(msg)
      } else {
        ElMessage.error(msg)
      }
    } else {
      console.log('error submit!')
      return false
    }
  })
}
</script>
<style lang="scss" scoped>
.el-row {
  margin-top: 20px;
  .card-box {
    text-align: center;
  }
  .el-form-item {
    margin: 20px auto;
  }
}
</style>
